<template>
	<div style="width: 100%;margin: 0 auto;">
		<el-tabs type="border-card" style="height: 80vh;width: 100%;min-width: 1160px;">
			<el-tab-pane style="padding: 30px;height: 800px;" class="box1" label="视频监控">
				<img src="../../assets/lyf-icon.png">
				<h2>视频监控</h2>
				<p style="color: #c9c3bf;font-size: 14px;">本监控可实现分钟级的数据监测，能够真实反馈投放效果。</p>
				<div class="con">
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<div class="con-tabs">
							<div @click="num=1" :class="num==1?'active':''">
								<i class="el-icon-aim"></i>
								<span>实时监控</span>
								<p>视频已发布，输入视频链接地址立即开始监控</p>
							</div>
							<div @click="num=2" :class="num==2?'active':''">
								<i class="el-icon-aim"></i>
								<span>批量实时监控</span>
								<p>批量导入视频地址，开启实时监控</p>
							</div>
						</div>
						<div class="content1" v-if="num==1">
							<h3>第一步，添加视频监控</h3>
							<div style="width: 100%;height: 40px;line-height: 40px;">
								<input type="" placeholder="请添加视频链接" v-model="url" /><button type="button"
									style="width: 30px;height: 30px;border: none;background-color: #5a309e;color: #fff;vertical-align: middle;"><i
										class="el-icon-search" @click="getIntel(url)"></i></button>
							</div>

							<!-- 视频详情 -->
							<div v-if="Intel.LogoUrl"
								style="display: flex;border: 1px solid #5b329f;width: 60%;padding: 4px;border-radius: 4px;align-items: center;margin: 10px 0;">
								<img :src="Intel.LogoUrl" style="width: 90px;height: 70px;margin: 0 10px;">
								<div style="line-height: 1.6;">
									<p
										style="width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
										{{Intel.Title}}
									</p>
									<p>{{Intel.Author}}</p>
									<p>{{Intel.DamuUpdateTime}} 发布</p>
								</div>
								<div style="width:10%;">
									<i style="width: 20%;font-size: 40px;color: #5b329f;" class="el-icon-success"></i>
								</div>
							</div>


							<h3>第二步，选择监控时长</h3>
							<div class="ul">
								<el-radio-group text-color="#5b329f" v-model="radio">
									<el-radio :label="1">24 小时</el-radio>
									<el-radio :label="2">48 小时</el-radio>
									<el-radio :label="3">72 小时</el-radio>
									<el-radio :label="4">7 天</el-radio>
									<el-radio :label="5">15 天</el-radio>
									<el-radio :label="6">30 天</el-radio>
									<el-radio :label="7">90 天</el-radio>
								</el-radio-group>
							</div>
							<h3>报告消耗</h3>
							<p>本次共需要消耗1次视频监控次数，当前账户剩余0次</p>
							<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
								<button class="btn">开始监听</button>
							</div>
						</div>
						<div class="content2" v-if="num==2">
							<h3>第一步，下载【批量导入模板】</h3>
							<p>
								<img src="">
								批量导入模块 <span style="color: #396ffe;">点击下载模板</span>
							</p>
							<h3>第二步，信息填入表格后，上传表格</h3>
							<p>
								<button type="button"
									style="padding: 8px 15px;font-size: 16px;border-radius: 3px;border: 2px solid #eee;background-color: #fff;margin-right: 20px;">+
									添加表格</button>
								<span>只能上传xls/xlsx文件</span>
							</p>
							<h3>第三步，选择监控时长</h3>
							<div class="ul">
								<el-radio-group text-color="#5b329f" v-model="radio">
									<el-radio :label="1">24 小时</el-radio>
									<el-radio :label="2">48 小时</el-radio>
									<el-radio :label="3">72 小时</el-radio>
									<el-radio :label="4">7 天</el-radio>
									<el-radio :label="5">15 天</el-radio>
									<el-radio :label="6">30 天</el-radio>
									<el-radio :label="7">90 天</el-radio>
								</el-radio-group>
							</div>
							<h3>报告消耗</h3>
							<p>本次所需点数视导入数量而定，当前账户剩余0次</p>
							<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
								<button class="btn">开始监听</button>
							</div>
						</div>

					</el-tabs>
				</div>
			</el-tab-pane>
			<el-tab-pane class="box2" label="监控报告">

				<div style="width: 100%;height: 40px;line-height: 40px;">
					<input class="inp" type="" placeholder="请添加视频名称和UP主名称" /><button type="button"
						style="width: 70px;height: 100%;border: none;background-color: #5a309e;color: #fff;vertical-align: middle;">搜索</button>
				</div>
				<div class="Int-details">

					<div class="Int-det-top" style="padding: 20px 0;">
						<strong>监控状态:</strong>
						<span :class="'isnum'?'show':''">全部</span>
						<span>监控中</span>
						<span>监控完成</span>
						<span>监控失败</span>
					</div>
					<div class="Int-det-con">
						<h3>监控的视频列表</h3>
						<div>
							<table border="0" cellspacing="" cellpadding="">
								<tr style="background-color: #f7f8fa;">
									<th colspan="3">视频信息</th>
									<th>监控类型</th>
									<th>新增播放</th>
									<th>新增点赞</th>
									<th>新增收藏</th>
									<th>新增评论</th>
									<th>操作</th>
								</tr>
								<tr v-if="list.length">
									<td>Data</td>
									<td>Data</td>
									<td>Data</td>
									<td>Data</td>
									<td>Data</td>
									<td>Data</td>
									<td>Data</td>
								</tr>
								<div v-else style="width: 194%;display: flex;justify-content: center;">
									<img src="../../assets/kzf_tu4.png">
								</div>
							</table>
						</div>
					</div>

				</div>

			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<style>
	.active {
		background-color: #f8f3ff;
		border-color: #59309f !important;
	}

	.show {
		background-color: #59309f;
		color: #fff;
		border-radius: 2px;
	}

	.el-radio__input.is-checked .el-radio__inner {
		border-color: #59309f;
		background: #59309f;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #59309f;
	}

	table {
		width: 100%;
	}

	table th {
		width: 100px;
		text-align: start;
		font-weight: 400;
		padding: 10px 2px;
		text-indent: 10px;
	}

	table:first-child {
		padding: 30px;
	}

	.el-tabs__content {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.inp {
		height: 40px;
		width: 34%;
		text-indent: 10px;
		border-radius: 4px;
		outline: #59309f;
		vertical-align: middle;
		padding: 2px;
		box-sizing: border-box;
	}

	.box1 {
		padding-top: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 2;
	}

	.con-tabs {
		display: flex;
		justify-content: center;
	}

	.content1,
	.content2 {
		margin-top: 20px;
	}

	.content1 input {
		width: 60%;
		line-height: 30px;
		height: 30px;
		outline: #59309f;
		text-indent: 10px;
		vertical-align: middle;
	}


	.con-tabs div {
		border: 1px solid #dedede;
		border-radius: 4px;
		width: 30%;
		margin: 0 20px;
		line-height: 1.6;
		padding: 10px;
	}

	.con-tabs div i {
		padding: 10px;
	}

	.con-tabs div span {
		color: #59309f;
		font-size: 18px;
	}

	.con-tabs div p {
		color: #a8acb0;
		font-size: 12px;
		padding: 0 10px;
	}

	.con {
		display: flex;
	}

	.con h3 {
		padding-left: 20px;
		border-left: 6px solid #59309f;
		font-weight: 400;
		height: 23px;
		line-height: 23px;
		font-size: 18px;
		margin: 10px 0;
	}

	.btn {
		color: #FFF;
		padding: 10px 40px;
		background-color: #59309f;
		border: none;
		border-radius: 2px;
		width: 180px;
	}

	.Int-det-top span {
		padding: 2px 8px;
		margin: 0 20px;
	}
</style>

<script>
	import {
		GetIntel
	} from '@/api/intelbras.js'
	export default {
		data() {
			return {
				activeName: 'first',
				radio: 7,
				stretch: true,
				num: 1,
				url: '',
				Intel: {},
				list: []
			};
		},
		created() {
			
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getIntel(e) {
				GetIntel({
						url:e
					})
					.then(res => {
						this.Intel = res.data.Data
						console.log(this.Intel);
					})
					.catch(err => console.log(err))
			}
		}
	};
</script>
